<template>
  <el-dialog title="工程编号检索" :visible.sync="dialogVisible" width="60%" @open="handleOpenDialog">
    <div class="toolbar">
      <el-form ref="froms" class="form-inline" :label-position="right" :inline="true" size="mini" style="margin-left:10px;">
        <el-form-item label="工程编号:">
          <el-input v-model="identification" placeholder="请输入工程编号" style="width: 125px;" />
        </el-form-item>
        <el-form-item label="完工状态:">
          <el-select v-model="isFinished" placeholder="请选择" type="text" style="width: 80px;">
            <el-option v-for="(item, index) in selectData" :key="index" :label="item.name" :value="item.key" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否军品:">
          <el-select v-model="isArmed" placeholder="请选择" type="text" style="width: 80px;">
            <el-option v-for="(item, index) in selectData" :key="index" :label="item.name" :value="item.key" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-loading="listLoading">
      <el-table
        ref="productNumberTable"
        :data="list"
        border
        height="300"
        style="width: 100%;"
        highlight-current-row
        @current-change="handleCurrentChange"
      >
        <el-table-column type="index" label="编号" align="center" width="50" />
        <el-table-column label="工程编号" align="center" min-width="150">
          <template slot-scope="{row}">
            {{ row.identification }}
          </template>
        </el-table-column>
        <el-table-column label="工程名称" align="center" min-width="150">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="描述" align="center" min-width="100">
          <template slot-scope="{row}">
            <span>{{ row.desciption }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否完工" align="center" min-width="100">
          <template slot-scope="{row}">
            <span>{{ row.isFinished }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否军品" align="center" min-width="100">
          <template slot-scope="{row}">
            <span>{{ row.isArmed }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSelectFinished()">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
const KEY_NAME = [
  { key: '0', name: '全部' },
  { key: '1', name: '否' },
  { key: '2', name: '是' }]
// 初始化数据
const initList = [
  { id: '414', // 文件父id
    identification: 'A0857A', // 文件id
    name: 'T50', // 名称
    isFinished: '否', // 类型 folder为文件夹类型
    isArmed: '否', // 文件大小
    description: '2020-04-21 11:21:37'
  },
  { id: '467', // 文件父id
    identification: 'A0863A', // 文件id
    name: 'A0863A', // 名称
    isFinished: '否', // 类型 folder为文件夹类型
    isArmed: '否', // 文件大小
    description: '2020-05-28 13:27:30'
  },
  { id: '399', // 文件父id
    identification: 'B4593A', // 文件id
    name: '50t浮台', // 名称
    isFinished: '否', // 类型 folder为文件夹类型
    isArmed: '否', // 文件大小
    description: '2020-06-29 15:29:34'
  }
]
export default {
  name: '',
  data() {
    return {
      dialogVisible: false,
      list: [],
      right: 'right',
      identification: '',
      isFinished: '',
      isArmed: '',
      currentRow: '',
      currentList: [], // 记录当前界面列表数据
      listLoading: false, // 加载遮盖层
      selectData: KEY_NAME
    }
  },
  methods: {
    // 当前文件界面根据关键字筛选数据
    currentSearchList() {
      this.currentList = initList
      return this.currentList
    },
    // 查询
    handleSearch() {
      this.listLoading = true
      setTimeout(() => {
        this.list = this.currentSearchList()
        this.listLoading = false
      }, 1000)
    },
    // 确认
    handleSelectFinished() {
      if (this.list.length > 0) {
        this.$emit('handleProductNumberSelected', this.currentRow)
        this.$refs.productNumberTable.setCurrentRow()
      }
      this.dialogVisible = false
    },
    // 弹窗打开时触发界面初始化数据
    handleOpenDialog() {
      this.identification = ''
      this.isFinished = '1'
      this.isArmed = '1'
      this.currentRow = ''
      this.handleProductNumberList()
    },
    // 初始化列表
    handleProductNumberList() {
      this.list = []
      this.currentList = []
    },
    // 主界面调用弹窗的的入口函数
    handleProductNumberDialog() {
      this.dialogVisible = true
    },
    // 表格选中时触发的事件，记录当前选中数据
    handleCurrentChange(val) {
      this.currentRow = val
    }
  }
}
</script>
